<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">模态框</view>
		</w-navbar>

		<w-modal v-model="modal1">
			<view class="modal1">弹出框内容</view>
		</w-modal>

		<w-modal v-model="modal2" async-close :closeIcon="false" mask-close @submit="submit2">
			<view class="modal1">异步关闭弹窗</view>
		</w-modal>

		<w-modal v-model="modal3" mask-close :closeIcon="false" confirm-text="提交" cancel-text="关闭">
			<view class="modal1">自定义文字/颜色</view>
		</w-modal>

		<w-modal v-model="modal4" mask-close :closeIcon="false" customBottom>
			<view class="modal1">自定义底部内容</view>
			<view slot="bottom" class="custom-bottom" hover-class="custom-bottom-hover" @click="modal4=false">我知道了</view>
		</w-modal>

		<pageDemoBlock title="基本用法" color="#1c87e4">
			<w-button @click="modal1 = true">普通弹窗</w-button>
		</pageDemoBlock>
		<pageDemoBlock title="异步关闭" color="#e46f1a">
			<w-button @click="modal2 = true">异步关闭弹窗</w-button>
		</pageDemoBlock>
		<pageDemoBlock title="自定义文字" color="#9443e4">
			<w-button @click="modal3 = true">自定义文字/颜色</w-button>
		</pageDemoBlock>
		<pageDemoBlock title="自定义底部内容" color="#e4071d">
			<w-button @click="modal4 = true">自定义底部内容</w-button>
		</pageDemoBlock>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				modal1: false,
				modal2: false,
				modal3: false,
				modal4: false,
			};
		},
		methods: {
			submit2() {
				setTimeout(() => {
					this.modal2 = false;
				}, 2000);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.modal1 {
		height: 240rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.custom-bottom {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #0055FF;
	}
	.custom-bottom-hover{
		background-color: #f3f3f3;
	}
</style>
